@page "/scheduler/field-validation"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo shows the way of adding default and custom validation rules to the editor fields of Scheduler.</p>
</SampleDescription>
<ActionDescription>
    <p> In this demo, the specific fields of Scheduler editor window such as <code>Subject</code>, <code>Location</code>, <code>Description</code>, <code>StartTime</code> and  <code>EndTime</code> are made to undergo validation such that if it is left as blank, then the default required validation message will be displayed in a separate tooltip, on clicking a save button. </p>
    <p>
        Additionally, the regex condition has been added to the <code>Location</code> field, so that if any special characters are typed into it, then the custom validation message will be displayed. The
        <code>Description</code> field has been validated to restrict the character count to be typed into it between 5 and 500 and not beyond that. This validation can be given by using the
        <code>Validation</code> API available within each <code>Fields</code> of the <code>EventSettings</code> property.
    </p>
    <p>
        Apart from this validation feature, the built-in validation has been provided to the start and end time fields, so that when the selected end time occurs before the start time, a validation message will be displayed as well as when some
        unwanted characters are typed into the date fields, the invalid date message will be alerted.
    </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleEventSettings DataSource="@DataSource">
                <ScheduleField>
                    <FieldSubject Name="Subject" Validation="@ValidationRules"></FieldSubject>
                    <FieldLocation Name="Location" Validation="@LocationValidationRules"></FieldLocation>
                    <FieldDescription Name="Description" Validation="@DescriptionValidationRules"></FieldDescription>
                    <FieldStartTime Name="StartTime" Validation="@ValidationRules"></FieldStartTime>
                    <FieldEndTime Name="EndTime" Validation="@ValidationRules"></FieldEndTime>
                </ScheduleField>
            </ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 9);
    static Dictionary<string, object> ValidationMessages = new Dictionary<string, object>() { { "regex", "Special character(s) not allowed in this field" } };
    ValidationRules ValidationRules = new ValidationRules { Required = true };
    ValidationRules LocationValidationRules = new ValidationRules { Required = true, RegexPattern = "^[a-zA-Z0-9- ]*$", Messages = ValidationMessages };
    ValidationRules DescriptionValidationRules = new ValidationRules { Required = true, MinLength = 5, MaxLength = 500 };
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
}
